<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
      .element {
          transition: .25s allow-discrete;
          opacity: 1;
      }
      @starting-style {
          .element {
              opacity: 0;
          }
      }
      .element[hidden] {
          opacity: 0;
      }
  </style>
</head>
<body>
<div id="element" class="element">占位内容</div>
<button onclick="show()">显示</button>
<script>
  function show() {
    element.toggleAttribute('hidden')
  }
</script>
</body>
</html>